<template>
    <div v-bind:class="className">
        <p>Dream</p>
        <button @click="changeClassName">改变样式</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const className = ref('box')
const changeClassName =()=> {
    className.value = 'redBox'
}
</script>

<style scoped>
.box{
    border: 1px solid pink;
}
.redBox{
    border: 1px solid aqua;
}
</style>